import React, { Component } from 'react'
import QueryList from '@/components/basicWidget/QueryList'
import { Modal } from 'antd'
import BadgeCard from '@/components/viewWidget/BadgeCard'
import { TableButton } from '@/components/basicWidget/Button'

class BadgeManage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modalVisual: false,
            modalKey: new Date().getTime() + '',
            badgeId: null
        }
    }

    async componentDidMount() {

    }

    onAdd = async () => {
        await this.editModalOpen(null)()
    }

    actionColumns = (columns, data) => {
        columns.push({ title: '操作', dataIndex: 'operate' })
        data = data.map(item => {
            item.operate = (
                <TableButton onClick={this.editModalOpen(item.id)}>编辑</TableButton>
            )
            return item
        })
        return { newColumns: columns, newData: data }
    }

    editModalOpen = (id) => {
        return async () => {
            await new Promise(resolve => {
                this.setState({
                    modalVisual: true,
                    badgeId: id,
                    modalKey: new Date().getTime() + ''
                }, resolve)
            })
        }
    }

    editModalCancel = async () => {
        await new Promise(resolve => {
            this.setState({
                modalVisual: false,
                modalKey: new Date().getTime() + ''
            }, resolve)
        })
        await this.queryList.onQuery()
    }

    renderEditModal = () => {
        return (
            <Modal
                title='徽章管理'
                open={this.state.modalVisual}
                onCancel={this.editModalCancel}
                footer={null}
                width={'80%'}
            >
                <BadgeCard
                    key={this.state.modalKey}
                    id={this.state.badgeId}
                ></BadgeCard>
            </Modal>
        )
    }

    render() {
        return (
            <>
                <QueryList
                    queryCode='badgeManage'
                    actionColumns={this.actionColumns}
                    onAdd={this.onAdd}
                    ref={queryList => this.queryList = queryList}
                >
                </QueryList>
                {this.renderEditModal()}
            </>
        )
    }
}


export default BadgeManage
